<template>
  <div>
    <ul class="template-list infinite-list-wrapper" style="overflow: auto">
      <li
        class="card template-item template-add"
        style="text-align: center"
        @click="addLowCode"
      >
        <div>新增</div>
        <i class="el-icon-plus" />
      </li>
      <li
        v-for="(item, index) in tableData"
        :key="item.id"
        class="card template-item"
        :class="{ 'active-item': activeIndex === index }"
        @mouseenter="onMouseenter(index)"
        @mouseleave="onMouseenter(-1)"
      >
        <div>{{ item.title }}</div>
        <el-image
          :src="item.shotCover"
        >
          <div slot="error">
            <div class="shot-cover-error">
              <div class="shot-cover-error-text">
                暂无封面
              </div>
            </div>
          </div>
        </el-image>
        <div v-if="activeIndex === index" class="hover-active">
          <div
            class="hover-active-text hover-active-edit"
            @click="editLowCode(item)"
          >
            编辑
          </div>
          <div class="hover-active-text hover-active-del">删除</div>
        </div>
      </li>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </ul>
  </div>
</template>

<script>
import { lowCodePageList } from '../../../../api/marketing'
import {
  INDENTIFICATION,
  OPERATION_TYPE,
  PAGE_SIGN
} from '@/views/wxaNewBuildModule/config'
export default {
  name: 'Index',
  data() {
    return {
      activeIndex: -1,
      tableData: [],
      loading: false,
      noMore: false,
      /* 分页 */
      paginationConfig: {
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      lowCodePageList(this.paginationConfig)
        .then((res) => {
          res.data.list.map(item => {
            const page = JSON.parse(item.pageJson)
            item.shotCover = page.attribute.shotCover
            return item
          })
          this.tableData = res.data.list
          this.paginationConfig.total = res.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    onMouseenter(index) {
      this.activeIndex = index
    },
    load() {
      this.loading = true
      setTimeout(() => {
        this.count += 10
        this.loading = false
      }, 2000)
    },
    addLowCode() {
      const params = {
        page_id: 0,
        sign: INDENTIFICATION.PAGE_FORM_MODAL,
        op: OPERATION_TYPE.ADD,
        from: PAGE_SIGN.CUSTOMER_FORM
      }
      this.$emit('handleAddLowCode', params)
    },
    editLowCode(page) {
      const params = {
        page_id: page.id,
        sign: INDENTIFICATION.PAGE_FORM_MODAL,
        op: OPERATION_TYPE.EDIT,
        from: PAGE_SIGN.CUSTOMER_FORM,
        pageJson: page.pageJson,
        status: page.status
      }
      this.$emit('handleEditLowCode', params)
    }
  }
}
</script>

<style scoped lang="scss">
.card {
  width: 10rem;
  height: 16rem;
}
.shot-cover-error{
  width: 10rem;
  height: 16rem;
  text-align: center;
  background-color:rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #03c1b680;
}
.template-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  height: 85vh;
  .template-item {
    margin-right: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    position: relative;
    .el-image {
      width: 100%;
      height: 100%;
    }
    .hover-active {
      position: absolute;
      top: calc(1rem + 1px);
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: calc(100% - 1rem);
      &-text {
        color: white;
        text-align: center;
        padding: 10px 0;
        margin: 5px 0;
        background-color: rgba(255, 255, 255, 0.5);
        &:first-child {
          margin-top: 40%;
        }
      }
    }
  }
}
.template-add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid whitesmoke;
  .el-icon-plus {
    font-size: 10rem;
  }
}
</style>
